<template>
  <div class="center-bottom-child">
    <ul class="child-list">
      <li class="child-item1">
        <cbl ref="cbl"></cbl>
      </li>
      <li class="child-item2">
        <cbr ref="cbr"></cbr>
      </li>
    </ul>
  </div>
</template>
<script>
import Cbl from '@/pages/secondPage/comps/centerBottom/cbl.vue'
import Cbr from '@/pages/secondPage/comps/centerBottom/cbr.vue'
// https://cn.vuejs.org/v2/style-guide/#组件-实例的选项的顺序-推荐
export default {
  name: 'CenterBottomChild',
  components: {
    Cbl,
    Cbr
  },
  model: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    init() {
      let tl = new TimelineMax({})
      tl.add(this.$refs.cbl.init(), 0), tl.add(this.$refs.cbr.init(), 0.5)
      return tl
    }
  }
}
</script>
<style lang="scss" scoped>
.center-bottom-child {
  width: 100%;
  height: 100%;
  .child-list {
    display: flex;
    justify-content: space-between;

    height: 100%;
    .child-item1 {
      flex-shrink: 0;

      width: 584px;
      height: 100%;
    }
    .child-item2 {
      width: calc(100% - 596px);
      height: 100%;
    }
  }
}
</style>